<template>
    <div>
        <el-switch
        v-model="uploadType"
        active-text="上传视频"
        active-value="video"
        inactive-value="img"
        @change="switchChange"
        inactive-text="上传图片">
        
        </el-switch>
        <div v-if="uploadType=='video'" style="display:flex">
            <div >
                <el-upload class="avatar-uploader el-upload--text" name="video" action="https://wxapp.gzmmkj.cn/api/file/upload-video" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
                    <video v-if="addForm.src !='' && videoFlag == false &&addForm.type=='video'" :src="addForm.src" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
                  <img v-if="addForm.src !='' && videoFlag == false &&addForm.type=='video'" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/del-Image.png"  class="del-icon" @click.stop="del">
                  <i v-else-if="videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
                    <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
                </el-upload>
                <P class="text">请保证视频格式正确</P>
            </div>
            <!-- <el-upload
                class="avatar-uploader"
                action="https://wxapp.gzmmkj.cn/api/file/upload-img"
                name="photo"
                :show-file-list="false"
                :on-success="handleVideoImgUpload"
            >
            <img v-if="addForm.video_post_src" :src="addForm.video_post_src" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <P class="text">视频封面图片</P>
            </el-upload> -->
        </div>
        <div v-if="uploadType=='img'">
            <el-upload
                class="avatar-uploader avatar"
                action="https://wxapp.gzmmkj.cn/api/file/upload-img"
                name="photo"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
            >
            <img v-if="addForm.src && addForm.type=='img'" :src="addForm.src" style="width: 100%;height: 100%;">
            <img v-if="addForm.src && addForm.type=='img'" src="http://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/mingmei/smallicon/icon/del-Image.png"  class="del-icon" @click.stop="del">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            videoFlag:false,//显示上传完成的视频
            videoUploadPercent:'',//上传的进度
            uploadUrl:'',//上传的地址
            uploadType:'',//上传的类型是图片还是视频
            addForm:{
                src:'',
                srcId:'',
                type:'',//文件类型video,img

                video_post_id:'',//视频封面图片id
                video_post_src:''//视频封面图片
            }
        }
    },
    props:{
        value:{
            type:Object,
            default:{}
        }
    },
    watch: {
        value:{
            deep:true,
            handler:function(nval){
                console.log(nval)
                if(nval.src){
                    this.addForm={
                        src:nval.src,
                        srcId:nval.srcId,
                        type:nval.type,//文件类型video,img

                        video_post_id:nval.video_post_id,//视频封面图片id
                        video_post_src:nval.video_post_src//视频封面图片
                    }
                    this.uploadType=nval.type;//初始的上传类型
                }
                
            }
        },
    },
    methods:{
      del(){
        this.addForm={
          src:'',
            srcId:'',
            type:'',//文件类型video,img

            video_post_id:'',//视频封面图片id
            video_post_src:''//视频封面图片
        }
        this.$emit('input', this.addForm);
      },
        switchChange(){
            //
            // this.addForm={
            //     src:'',
            //     srcId:''
            // }
        },
        handleVideoSuccess(res, file) {
            //上传视频成功    
            this.videoFlag = false;
            this.videoUploadPercent = 0;
            if(res.level=='success'){
                this.addForm.srcId=res.data.id;
                this.addForm.src=res.data.video_url;
                this.addForm.type='video'
            }
            this.$emit('input', this.addForm);
            
        },
        handleVideoImgUpload(res,file){
            //上传视频封面
            if(res.data){
				this.addForm.video_post_src=res.data.img_url;
                this.addForm.video_post_id=res.data.id;
                this.addForm.type='video';
                this.$forceUpdate();
                this.$emit('input', this.addForm);
            }
        },
        
        uploadVideoProcess(event, file, fileList){
            //获取上传视频进度
            this.videoFlag = true;
            this.videoUploadPercent = +file.percentage.toFixed(0);
        },
        beforeUploadVideo(file) {
            //上传视频前
            console.log(file)
            const isLt10M = file.size / 1024 / 1024  < 10;
            if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            // if (!isLt10M) {
            //     this.$message.error('上传视频大小不能超过10MB哦!');
            //     return false;
            // }
        },
        handleAvatarSuccess(res, file) {
			//上传照片成功
			if(res.data){
				this.addForm.src=res.data.img_url;
                this.addForm.srcId=res.data.id;
                this.addForm.type='img';
                this.$forceUpdate();
                this.$emit('input', this.addForm);
            }
        },
        async getBrandList(){
            //品牌列表
            let params={
                page:this.page,
                limit:16
            }
            let res=await this.$api.getBrandList({params})
        }
    }
}
</script>
<style lang="scss" scoped>
    //上传图片样式
    .avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
		border: 1px dashed #d9d9d9;
	}
	.avatar {
		width: 178px;
		height: 178px;
		display: block;
		object-fit: contain;
    position: relative;
	}
    .del-icon{
      position: absolute;
      top: -10px;
      right: -10px;
      height: 20px;
      width: 20px;
      z-index: 3000;
      background: #ffffff;
      border-radius: 360px;
    }
</style>
<style>
  .el-upload{
    position: relative;
  }
</style>
